
<template>
    <div style="height: 100%">

<!--        <div class="tempxyz rightTable">
            <CCard class="rightCard">
                <CCardHeader class="header-wraper">
                    <div class="header-left-titleWraper">
                        <span class="textTitle">任务集管理</span>
                    </div>
                    <div class="header-right-wraper">
                        <CButton color="info" @click=" addShow=true  " class="system-btn-style">
                            <CIcon name="cil-plus" />&nbsp;添加任务集
                        </CButton>
                    </div>
                </CCardHeader>
                <CCardBody class="card-body">

                </CCardBody>
            </CCard>
        </div>-->

  <!--新增-->
        <div>
          <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
            <template v-slot:show_details="item">
              <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="update(item.data.row)"
                  data-permission="Btn_Template_Up"
              >编辑</CButton>
              <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="deleteRow(item.data.row.id)"
                  data-permission="Btn_Template_Del"
              >删除</CButton>
            </template>
          </TableList>
        </div>

        <Modal v-model="addShow" draggable scrollable title="新增任务集" :z-index="100000" >
            <p slot="header" class="modalHeader">{{formCustom.id?"修改任务集":"新增任务集"}}</p>
            <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="100">
                <FormItem label="任务集名称" prop="name">
                    <Input type="text" v-model="formCustom.name"></Input>
                </FormItem>
<!--                <FormItem label="任务集编码" prop="code">
                    <Input type="text" v-model="formCustom.code"></Input>
                </FormItem>-->
                <FormItem label="备注" prop="note">
                    <Input v-model="formCustom.note" maxlength="100" show-word-limit type="textarea" placeholder="请输入备注"/>
                </FormItem>
            </Form>
            <template #footer class="footerBtns">
                <CButton @click="addShow = false" color="info" class="cancel-btn"
                >取消</CButton
                >
                <CButton @click="addOk" color="info" class="system-btn-style"
                >确定</CButton
                >
            </template>
        </Modal>
        <Modal
                v-model="delShow"
                draggable
                scrollable
                title="删除版本信息"
                :z-index="100000"
                :styles="modalStyle"
        >
            <p slot="header" class="modalHeader">
                <img src="@/assets/icons/shanchu.svg" alt />
                <span style="margin-left: 5px">删除版本信息</span>
            </p>
            <div class="delKuangBody">
                <p>您正在删除该版本记录信息</p>
                <p>请确认是否删除?</p>
            </div>
            <template #footer class="footerBtns">
                <CButton @click="delShow= false" color="info" class="cancel-btn"
                >取消</CButton
                >
                <CButton @click="delOk" color="info" class="system-btn-style"
                >确定</CButton
                >
            </template>
        </Modal>
    </div>
</template>


<script>
    import TableList from "@/template/table/TableList";
    export default {
        name: "taskAggregate",
        components: { TableList },
        data() {
            return {
                addShow: false,
                formCustom: {
                    name: '',
                    note: '',
                    userName:this.$store.state.user.userName
                },
                ruleCustom: {
                    name: [
                        { required: true, message: '请输入任务集名称', trigger: 'blur' }
                    ],
                },
                modalStyle: { top: "250px" },
                delShow: false,
                clickId: "",
                getColumns: [
                    {
                        title: "名称",
                        key: "name",
                        className: "centerText",
                    },
                    {
                        title: "创建日期",
                        key: "createTime",
                        width: 180,
                        className: "centerText",
                    },
                    {
                        title: "更新日期",
                        key: "updateTime",
                        width: 180,
                        className: "centerText",
                    },
                    {
                        title: "备注",
                        key: "note",
                        width: 120,
                        className: "centerText",
                    },
                    {
                        key: "show_details",
                        slot: "show_details",
                        title: "操作",
                        width: 180,
                        className: "centerText",
                    },
                ],
                getAxios: {
                    url: this.$api.manageApi.getAllTaskSet, //请求路径
                    method: "get", //请求方式
                    dataList: {
                        userName:this.$store.state.user.userName,
                        pageNum: "",
                        currentPage:"",
                        pageSize: "",
                    }, //请求参数
                },
            };
        },
        methods: {
            addOk() {
                let that = this;
                this.$refs["formCustom"].validate((valid) => {
                    if (valid) {
                       let url= that.formCustom.id ? that.$api.manageApi.getAllTaskSetUpdate+that.formCustom.id : that.$api.manageApi.getAllTaskSetCreate;
                        that.http.post(url, that.formCustom).then((res) => {
                            if (res.data.success) {
                                that.$Message.success(res.data.message);
                                that.addShow = false;
                                that.getVersionList();
                            } else {
                                that.$Message.error(res.data.message);
                            }
                        });
                    } else {
                        that.$Message.error('请完整填写表单');
                    }
                })
            },
            // 刷新列表
            getVersionList() {
                this.$refs.table.getRefreshTable();
            },
            update(data) {
                this.addShow = true;
                data.userName=this.$store.state.user.userName
                this.formCustom = JSON.parse(JSON.stringify(data));
            },
            deleteRow(id) {
                this.delShow = true;
                this.clickId = id;
            },
            delOk() {
                let self = this;
                let path = this.$api.manageApi.getAllTaskSetDel+ self.clickId;
                this.http.delete(path).then((res) => {
                    if (res.data.success) {
                        self.$Message.success(res.data.message);
                        self.$refs.table.getRefreshTable();
                        self.delShow = false;
                    } else {
                        this.$Message.error(res.data.message);
                    }
                });
            },
          openAddDelig() {
            this.addShow = true;
          }
        },
        watch: {
            addShow(val){
                if (!val) {
                    this.formCustom.id = "";
                    this.formCustom.name=""
                    this.formCustom.code=""
                    this.formCustom.note=""
                }
            }
        },
    };
</script>
<style scoped>
    .col-xl-12 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .footerPage {
        display: flex;
        justify-content: flex-end;
        cursor: pointer;
        color: #151517 !important;
        /* margin-right: 10px; */
    }
    .pageContent {
        margin-right: 26px;
        font-size: 14px;
    }
    .selectStyle {
        display: inline-block;
        width: 100px;
        margin-right: 5px;
    }

    .page-link:hover {
        background-color: #ffffff;
        border-color: #ffffff;
    }

    .versionMangeTable {
        height: 100%;
        overflow-y: auto;
    }
    .version {
        height: calc(100% - 52px);
        overflow-y: auto;
    }
    .featureDataList {
        height: 466px;
        overflow-y: auto;
    }
    .labelVersion {
        margin-left: 12px;
    }
</style>
<style scoped>
    /deep/.ivu-table td.centerText {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        text-align: -moz-center;
        text-align: -webkit-center;
    }

    .onButton:hover {
        color: white;
    }
    /deep/.ivu-form-item{
      margin-bottom: 10px;
    }
    /deep/.ivu-modal-body{
      padding: 15px 32px 5px 20px;
    }
    .productLine{
      height: 100%;
    }


    /deep/.ivu-table-wrapper{
      max-height: 100%!important;
    }
    /deep/.ivu-table-body{
      max-height:calc(100% - 89px)!important;
      overflow-y: auto!important;
    }

    /deep/.card-footer{
      background-color: rgba(255, 255, 255, 1) !important;
    }
</style>
